<script>
export default {
  name: "imgDetail",
  data() {
    return {
      // 图片路径数组
      imagePaths: [
        require('@/assets/items/1.png'), // 第一张图片
        require('@/assets/items/2.png'), // 第二张图片（用于中间上半部分）
        require('@/assets/items/3.png'), // 第三张图片（用于中间下半部分）
        require('@/assets/items/4.png'), // 第四张图片
      ]
    };
  }
}
</script>

<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <img :src="imagePaths[0]" alt="Image 1" class="grid-content bg-purple">
      </el-col>
      <el-col :span="24">
        <!-- 中间区块，垂直分割为上下两部分 -->
        <el-row type="flex" justify="center" direction="column" class="middle-row">
          <el-col :span="12" class="middle-col">
            <img :src="imagePaths[1]" alt="Image 2" class="middle-image bg-purple">
          </el-col>
          <el-col :span="12" class="middle-col mt-2" style="border: 1px solid red;">
            <img :src="imagePaths[2]" alt="Image 3" class="middle-image bg-purple">
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <img :src="imagePaths[3]" alt="Image 4" class="grid-content bg-purple">
      </el-col>
    </el-row>
  </div>
</template>


<style scoped>

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content, .middle-image {
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: auto; /* 或者设置一个固定高度，取决于你的需求 */
}

.middle-row {
  height: 100%; /* 如果需要，可以设置一个固定高度，或者通过其他方式控制高度 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 垂直居中，如果需要的话 */
}

.middle-col {
  /* 根据需要添加额外的样式，比如控制图片之间的间距 */
}
</style>
